import style from "../assets/css/Kinddetail.module.scss";
import { useHistory } from "react-router-dom";
import { useEffect, useState, useRef } from "react";
import { gettypeBook } from "../axios/api";
import { useSelector, useDispatch } from "react-redux";
import { Checkbox, Space, Button, Dialog } from "antd-mobile";

const Reading = (props) => {
  //获取参数
  const type = useHistory().location.state.types;
  // console.log(type);
  const history = useHistory();
  //没放到redux的数据
  const [data, setData] = useState([]);

  // 单选状态
  const [sle, setSle] = useState(false);
  //ref
  const rom = useRef();

  //接收store参数
  const st = useSelector((state) => state);
  console.log(st);

  // console.log(st);
  const dispatch = useDispatch();

  //样式

  //请求数据
  useEffect(async () => {
    //redux判断
    // if(st.sum.length===0){
    //   const book_ = await getAllBook();
    //   let res = book_.data.data.filter((item, idx) => {
    //     return item.type === type;
    //   });
    //   // console.log(res);
    //   res.forEach((element) => {
    //     element.sle = false;
    //   });

    //   // setData(res);

    //   dispatch({ type: "data", data: res });
    // }
    // 请求的数据
    const book_ = await gettypeBook(type);
    console.log(book_,"asdasda");

    let res = book_.data.data.filter((item, idx) => {
      return item.type === type;
    });
   //给数据添加sle属性
    res.forEach((element) => {
      element.sle = false;
    });
    //把数据存在redux里
    dispatch({ type: "data", data: res });

   


    let cn =JSON.parse( localStorage.getItem('key'))
    if (cn&&cn[0].type===type) {

      let newdata= res.filter((i)=>{
        return  i._id!==cn._id
    })

    newdata.forEach((i)=>{
      cn.push(i)
    })

    dispatch({ type: "data", data: cn });
    }
    console.log(cn,"cn");
   
  

    
  
   


 

    setData(res);

    // dispatch({ type: "data", data: cn });
  }, []);

  return (
    <div className={style.main}>
      {/* 头部 */}
      <div className={style.head}>
        {st.ct ? (
          <div
            onClick={() => {
              let aa = st.sum.map((item) => {
                item.sle = !item.sle;
                return item;
              });

              dispatch({ type: "data", data: aa });

              // setData(
              //   data.map((item)=>{
              //   item.sle=!item.sle
              //   return  item
              // }))
            }}
          >
            反选
          </div>
        ) : (
          <div
            className="iconfont icon-xiangzuo1"
            onClick={() => {
              history.goBack();
            }}
          ></div>
        )}

        <div>{type}</div>
        <div
          onClick={() => {
            dispatch({ type: "xlb", incres: !st.ct });
          }}
        >
          <i className="iconfont icon-dui"></i>
          <span>选择</span>
        </div>
      </div>

      {/* 底部 */}
      <div className={style.body}>
        {st.sum.map((item, idx) => {
          return (
            <div
              //ref
              // ref={item.sle===true? rom:null}

              className={style.wrap}
              key={idx}
              // 点击改变状态
              onClick={(e) => {
                if (!st.ct) return;

                st.sum[idx].sle = !item.sle;
                dispatch({ type: "data", data: [...st.sum] });

                // setData([...data] )
              }}
            >
              <div>
                <img src={item.cover} />
                <div className={st.ct === false ? style.active : style.haha}>
                  {/* 单选 */}
                  <Checkbox
                    checked={item.sle}
                    style={{
                      "--icon-size": "18px",
                      "--font-size": "14px",
                      "--gap": "6px",
                    }}
                  />
                </div>
              </div>
              <p>
                <span>{item.type}:</span>
                {item.name}
              </p>
            </div>
          );
        })}
      </div>

      <p>{st.sum.length}本公开阅读</p>

      {/* 底部出现 */}
      <div
        className={st.ct ? style.botact : style.actives}
        style={{
          pointerEvents: st.sum.find((i) => {
            return i.sle === true;
          })
            ? "auto"
            : "none",
        }}
      >
        <div className={style.frist}>
          <div>
            <i className="iconfont icon-shujia"></i>
            <p>私密阅读</p>
          </div>

          <div>
            <i className="iconfont icon-yunxiazai_o"></i>
            <p>下载到本地</p>
          </div>

          <div>
            <i className="iconfont icon-shujia1"></i>
            <p>添加到书单</p>
          </div>
        </div>

        {/* 第二行 */}
        <div className={style.second}>
          <div className={style.haha}>
            <i className="iconfont icon-zhiding"></i>
            <Button
              block
              onClick={() =>
                Dialog.alert({
                  content: "准备置顶啦?",
                  confirmText: "确认",
                  bodyStyle:{height:'100px',lineHeight:"100PX"},
                  bold:true,
                  onConfirm: (a) => {
                    let res = st.sum.filter((item) => {
                      return item.sle === true;
                    });
                    console.log(res,"res");
                    localStorage.setItem("key", JSON.stringify(res))
                    let last = st.sum.filter((item) => {
                      return item.sle !== true;
                    });

                    res.forEach((i) => {
                      last.unshift(i);
                    });

                    dispatch({ type: "data", data: last });

                    dispatch({ type: "xlb", incres: !st.ct });
                  },
                })
              }
            >
              置顶啦
            </Button>
          </div>

          <div>
            <i className="iconfont icon-yuedushuben"></i>
            <p>分组</p>
          </div>

          <div>
            <i className="iconfont icon-shudan"></i>
            <p>移出书架</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Reading;
